<template>
  <div class="home">
    首页
    <!-- <p>我的名字是{{name}}我的年龄是{{obj.age}}</p> -->
    <!-- <my-header :num="40" disabled="hjk"></my-header> -->
    <component is="MyHeader"></component>
  </div>
</template>

<script>
// @ is an alias to /src
import MyHeader from '../components/myHeader';
import One from '../components/One';
import { ref, reactive,toRef, toRefs} from 'vue';
export default { 
  name: 'HomeView',
  components: {
    MyHeader,
    One
  },
  setup(props,ctx) {
    const data = reactive({
      name: '王麻子',
      obj: {
        age: 20
      }
    })
    return{
      // ...toRefs(data),
       name: toRef(data,'name'),
       obj:{
         age: toRef(data.obj,'age'),
       }
    }
  }
}
// template transition transition-group  slot  keep-alive  component 都属于vue的内置组件。
// template 模板，不渲染标签 
// transition 动画（单个动画）transition-group 动画 （一组动画，或者是多个动画）///// slot 插槽 （具名插槽，匿名插槽，作用域插槽）
// keep-alive 包裹动态组件的，可以用来包裹 <router-view/> 使其根据相应的条件销毁
// component 动态注册组件

</script>
